<template>
    <div class="pai-detail">
        <!--头部-->
        <Header/>
        <!--导航-->
        <Nav :selectedNum="navOptions.selectedNum" :autoShowCateNav="navOptions.autoShowCateNav"/>

        <!--面包屑-->
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ name : 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name : 'pai' }">拍卖专场</el-breadcrumb-item>
            <el-breadcrumb-item>[无保留价][9.5新] 积家男表-大师-自动机械男表 Q1718470</el-breadcrumb-item>
        </el-breadcrumb>

        <!--拍品内容-->
        <div class="content">
            <!--左边-->
            <div class="pm-main">
                <div class="pm-head fn-clear">

                    <div class="pm-head-l fn-left">
                        <div class="pm-pic-con">
                            <a href="javascript:;" class="pm-pic">
                                <span
                                        class="ks-imagezoom-wrap">
                                    <img id="multi"
                                         src="//img.alicdn.com/bao/uploaded/i3/O1CN01sW00YI1wdBfE5BTg0_!!2-paimai.png_400x400.jpg"
                                         alt="">
                                    <span class="ks-imagezoom-icon" style="display: none;"></span>
                                    <span style="position:absolute;top:-9999px;left:-9999px;"
                                          class="ks-imagezoom-lens"></span>
                                </span>
                            </a>
                        </div>


                        <ul id="J_UlThumb" class="pm-thumb fn-clear">

                            <li :class="{'selected' : subImgNavIndex === 0}" @mouseover="subImgNavIndex = 0">
                                <img src="//img.alicdn.com/bao/uploaded/i3/O1CN01sW00YI1wdBfE5BTg0_!!2-paimai.png_50x50.jpg"
                                     alt="">
                            </li>

                            <li :class="{'selected' : subImgNavIndex === 1}" @mouseover="subImgNavIndex = 1">
                                <img src="//img.alicdn.com/bao/uploaded/i1/O1CN013p6nSa1wdBfHT5dPG_!!2-paimai.png_50x50.jpg"
                                     alt="">
                            </li>

                        </ul>

                    </div>


                    <div class="J_ItemRender item-render-wrapper">

                        <div class="J_PItem pm-head-r  pm-status-on  pm-status-no-sign fn-left fn-clear"

                        >
                            <div class="J_AlbumTag dc-tag"></div>
                            <h1>{{curGoodsObj.goodsName}}</h1>


                            <div class="pm-status fn-clear">
                                <span class="pm-status-mark pm-status-mark-will">
                                    <span class="J_StatusMask">即将开始</span>
                                </span>
                                <span class="pm-status-mark pm-status-mark-on">
                                    <span class="J_StatusMask">正在拍卖</span>
                                </span>
                                <span class="pm-status-mark pm-status-mark-over">
                                    <span>已结束</span>
                                </span>


                                <span class="pm-time pm-will-time" v-if="false">
                                    <span class="pm-time-title">拍卖时间</span>

                                        <span class="time-num pm-num">今天</span>

                                    <span class="time-num pm-num">15:00</span>
                                    &nbsp;-&nbsp;
                                            <span class="time-num pm-num">明天</span>
                                    <span class="time-num pm-num">15:00</span>
                                </span>


                                <span class="pm-time pm-on-time">
                                    <span class="pm-time-title">距结束</span>
                                    <span class="J_TimeLeft"><span class="time-num pm-num">20</span><span>时</span><span
                                            class="time-num pm-num">45</span><span>分</span><span
                                            class="time-num pm-num">27</span><span>秒</span><span
                                            class="time-num pm-num">1</span></span>
                                    <span class="J_DelayCnt"></span>
                                </span>


                                <span class="pm-time pm-over-time" v-if="false">
                                    <span class="pm-time-title">结束时间</span>
                                    <span class="time-num pm-num">11</span><span>月</span>
                                    <span class="time-num pm-num">03</span><span>日</span>
                                    <span class="time-num pm-num">15:00</span>
                                </span>


                            </div>


                            <span class="tbc-pm-notify-btn tbc-pm-notify-btn-zp-fg btn-unsubscribe-wrap">
                                <a class="btn-unsubscribe" href="javascript:;">
                                    <span class="tbc-pm-notify-iconfont">
                                        <em class="el-icon-alarm-clock remind-clock"></em>
                                    </span>
                                    <br/>
                                    <span class="notify-btn-text J_TBC_PN_Btn_Text"
                                          style="color: rgb(55,55,55);">结束前提醒</span>
                                </a>
                            </span>


                            <form id="J_ApplyForm" action="#">


                            </form>


                            <form id="J_BidForm" action="/api/pmp/33175855533384/bid" method="post">


                                <div class="pm-operation">


                                    <div class="pm-money">
                <span class="title">

                        当前价

                </span>
                                        <span class="text">
                    <em class="fn-rmb">¥</em>
                                            <el-tooltip content="壹元" placement="top" effect="light">
                                                <span class="pm-current-price J_Price J_CurrentPrice pm-num">{{curGoodsObj.curPrice}}</span>
                                            </el-tooltip>
                </span>
                                        <a class="pm-bid-cnt" id="J_BidCntPart" href="javascript:void(0)"></a>
                                    </div>


                                    <div class="pm-bid">
                                        <span class="title">保证金</span>
                                        <span class="text deposit-text">
                                            <em class="fn-rmb">¥</em>
                                            <el-tooltip content="壹仟伍佰元" placement="top" effect="light">
                                                <span class="pm-deposit-price pm-num J_Price">{{curGoodsObj.deposit}}</span>
                                            </el-tooltip>
                                        </span>
                                    </div>


                                    <div class="pm-submit">
                                        <a href="javascript:void(0)" id="J_ApplyBtn"
                                           class="pm-button pm-apply-button fn-inline-block">
                                            <span class="el-icon-finished"
                                                  style="font-size: 20px;margin-right: 10px;"></span>
                                            <span @click="pay">报名交保证金</span>
                                        </a>
                                    </div>


                                    <div class="pm-result-tip fn-box-shadow J_ResultTip" v-if="false">
                                        <span class="el-icon-finished"></span><span
                                            class="J_ResultInfo">出价成功</span>
                                    </div>
                                </div>


                            </form>

                            <div class="pm-people">
                                <img class="pm-people-logo"
                                     src="https://img.alicdn.com/tfs/TB1TTKVX6rguuRjy0FeXXXcbFXa-276-69.png">
                                <span class="pm-people-cell">
        <em class="pm-num">0</em>人报名
    </span>
                                <span class="pm-line"></span>
                                <span class="pm-people-cell">
        <em class="pm-num">1</em>人设置提醒
    </span>
                                <span class="pm-line"></span>
                                <span class="pm-people-cell">
        <em class="pm-num">9</em>次围观
    </span>
                            </div>

                            <div class="pm-seller-wrapper J_SellerWrapper">

                                <div class="J_AttachmentAndseller">

                                    <div class="pm-attachment">
                                        <ul class="fn-clear">
                                            <li class="line1"><span class="title">起拍价:</span>

                                                <em class="fn-rmb">¥</em><span>{{curGoodsObj.startPrice}}</span>

                                            </li>
                                            <li class="line2">
                                                <el-tooltip
                                                        content="出价时最少的加价金额。" placement="bottom" effect="light">
                                                    <span class="title range-title">加价幅度:</span>
                                                </el-tooltip>
                                                <em class="fn-rmb">¥</em><span>300</span>

                                            </li>
                                            <li class="line3">
                                                <el-tooltip
                                                        content="本拍品参拍需要锁定的金额。" placement="bottom" effect="light">
                                                    <span class="title deposit-title">保证金:</span>
                                                </el-tooltip>
                                                <em class="fn-rmb">¥</em><span>1,500</span>

                                            </li>
                                        </ul>
                                        <ul class="fn-clear">

                                            <li class="line1">
                                                <el-tooltip
                                                        content="拍卖佣金是指拍卖人按拍卖成交价的一定比例向委托人及买受人收取的服务费。" placement="bottom"
                                                        effect="light">
                                                    <span class="title commission-title" style="letter-spacing: 6px;">佣金:</span>
                                                </el-tooltip>
                                                <span>无</span>
                                            </li>


                                            <li class="line2">
                                                <el-tooltip
                                                        content="竞拍最后2分钟内，若有用户出价，即进入延时竞价周期。" placement="bottom"
                                                        effect="light">
                                                    <span class="title delay-title">延时周期:</span>
                                                </el-tooltip>
                                                <span>5分/次</span>
                                            </li>
                                            <li class="line3">
                                                <el-tooltip
                                                        content="卖家设定的拍品的最低成交价格，最终的价格低于该价格即流拍。" placement="bottom"
                                                        effect="light">
                                                    <span class="title reserve-title">保留价:</span>
                                                </el-tooltip>
                                                <span>无保留价</span>
                                            </li>
                                        </ul>


                                    </div>

                                    <div class="pm-seller J_PmSeller" style="margin-left:20px;">

                                        <p>
                                            <span class="title">送拍机构:</span>
                                            <a class="seller-name" target="_blank" style="margin-left: 10px;"
                                               href="javascript:;" @click="$store.dispatch('invalidBtnAlertAction')"
                                            >北京恒时明宇贸易有限公司</a>
                                            <span class="ww-light ww-large" style="display: inline-block;"
                                            ><a
                                                    href="javascript:;"
                                                    @click="$store.dispatch('invalidBtnAlertAction')"
                                                    target="_blank" class="ww-inline ww-online"
                                                    title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。"
                                                    style="display: inline-block;width: 70px;"
                                            ></a></span>
                                        </p>


                                        <p class="extra-service">
                                            <span class="title">特色服务:</span>
                                            <span class="J_ServiceContent" style="margin-left: 10px;">

                                            <a class="appreciate-icon" href="javascript:;"
                                               @click="$store.dispatch('invalidBtnAlertAction')"
                                               title="若机构售假，机构需赔付3倍成交金额给竞买成功者">
                                                <s class="el-icon-check es-icon es-icon"></s>假一赔三
                                            </a>
                                                <a class="appreciate-icon"
                                                   href="javascript:;" @click="$store.dispatch('invalidBtnAlertAction')"
                                                   title="满足7天无理由退货申请的前提下，可提出7天无理由申请">
                                                    <s class="el-icon-check es-icon"></s>七天无理由
                                                </a>
                                                <a class="appreciate-icon" href="javascript:;"
                                                   @click="$store.dispatch('invalidBtnAlertAction')"
                                                   title="此款拍品提供线下预展，欢迎现场鉴赏">
                                                    <s class="el-icon-check es-icon"></s>拍前预展
                                                </a><a class="appreciate-icon" href="javascript:;"
                                                       @click="$store.dispatch('invalidBtnAlertAction')"
                                                       title="该送拍机构已开通花呗支付">
                                                <s class="el-icon-check es-icon"></s>花呗</a></span>
                                        </p>


                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="pm-body fn-clear">

                    <div class="pm-bid-flow" id="Pm-Bid-Flow">
                        <img src="//img.alicdn.com/tps/i4/TB1WimyFVXXXXb1XVXXrF.AGVXX-938-54.png" alt="竞拍流程"
                             usemap="#bid-flow">
                        <map name="bid-flow" id="bid-flow">
                            <area shape="rect"
                                  href="javascript:;"
                                  target="_blank" title="交保证金" alt="">
                            <area shape="rect"
                                  href="javascript:;"
                                  target="_blank" title="出价竞拍">
                            <area shape="rect"
                                  href="javascript:;"
                                  target="_blank" title="竞拍成功" alt="">
                            <area shape="rect"
                                  href="javascript:;"
                                  target="_blank" title="支付货款">
                            <area shape="rect"
                                  href="javascript:;"
                                  target="_blank" title="完成收货" alt="">
                        </map>
                    </div>

                    <div class="pm-addition">

                        <ul id="J_DetailTabMenu" class="tab-menu fn-clear"
                            style="position: relative; top: 0px; bottom: 0px; left: 0px;">
                            <li id="tab1" :class="{'current' : detailNavIndex === 0}" @click="detailNavIndex = 0">
                                <router-link :to="{name:'pai-detail-describe'}">拍品描述</router-link>
                            </li>
                            <li id="tab2" :class="{'current' : detailNavIndex === 1}" @click="detailNavIndex = 1">
                                <router-link :to="{name:'pai-detail-record'}">出价记录(<span
                                        class="record-num pm-num J_Record J_BidCnt">4</span>)
                                </router-link>
                            </li>

                            <li id="tab3" :class="{'current' : detailNavIndex === 2}" @click="detailNavIndex = 2">
                                <router-link :to="{name:'pai-detail-protection'}">服务保障</router-link>
                            </li>

                            <li id="tab4" :class="{'current' : detailNavIndex === 3}" @click="detailNavIndex = 3">
                                <router-link :to="{name:'pai-detail-notice'}">保证金须知</router-link>
                            </li>
                            <div class="wrap-line">
                                <span class="line selected1" style="left: 0; width: 128px;"></span>
                            </div>
                        </ul>

                        <!--商品详情Router-->
                        <transition name="el-zoom-in-top">
                            <keep-alive>
                                <router-view></router-view>
                            </keep-alive>
                        </transition>

                    </div>

                </div>


            </div>
            <!--右边-->
            <div class="pm-sub fn-clear">

                <div class="mini-record-list" id="J_MiniRecord">
                    <div class="record-list-title">
                        <p class="line"></p>
                        <p class="title">出价记录
                            <em class="J_BidCnt">(4)</em>
                        </p>
                    </div>
                    <div id="J_MiniRecordCon">
                        <ul class="record-list-cnt" id="J_MiniRecordList">
                            <li class="record-list-head">
                                <span class="record-icon">状态</span>
                                <span class="nickname">竞拍人</span>
                                <span class="price">价格</span>
                            </li>


                            <li class="J_MiniRecordItem leader ">
                                <span class="record-icon"><s>领先</s></span>
                                <span class="nickname">L5844</span>
                                <span class="price fn-ellipsis">
            <em class="fn-rmb">¥</em>
            301
            
            
        </span>
                            </li>


                            <li class="J_MiniRecordItem out ">
                                <span class="record-icon"><s>出局</s></span>
                                <span class="nickname">D7043</span>
                                <span class="price fn-ellipsis">
            <em class="fn-rmb">¥</em>
            201
            
            
        </span>
                            </li>


                            <li class="J_MiniRecordItem out ">
                                <span class="record-icon"><s>出局</s></span>
                                <span class="nickname">L5844</span>
                                <span class="price fn-ellipsis">
            <em class="fn-rmb">¥</em>
            101
            
            
        </span>
                            </li>


                            <li class="J_MiniRecordItem out ">
                                <span class="record-icon"><s>出局</s></span>
                                <span class="nickname">D7043</span>
                                <span class="price fn-ellipsis">
            <em class="fn-rmb">¥</em>
            1
            
            
        </span>
                            </li>


                        </ul>

                        <a href="#Pm-Bid-Flow" @click="getMoreRecord" class="see-more">查看更多<em
                                class="el-icon-arrow-right"></em></a>

                    </div>
                </div>

                <div class="recommend-over" id="J_RecommendOver" style="display: block;">
                    <div class="list-header">
                        <h3 class="iconfont-pai"><i>当</i>前热拍</h3>
                        <span class="list-reflesh" id="J_Reflesh"
                              @click="$store.dispatch('invalidBtnAlertAction')">换一批</span>
                    </div>
                    <div class="list-content">
                        <ul class="item-list" id="J_RecommendList">

                            <li id="pai-detail-hot-item-607374331567" class="item">
                                <div class="item-info">
                                    <a target="_blank" class="img-wrap"
                                       href="javascript:;">
                                        <img alt="[无保留价][9.0新] 欧米茄男表-超霸-自动机械手表 3520.50.00"
                                             src="//img.alicdn.com/bao/uploaded/i3/O1CN016fgop61wdBduvqQOv_!!2-paimai.png_210x210Q90.jpg">
                                    </a>
                                    <p class="title"><a target="_blank"
                                                        href="javascript:;">[无保留价][9.0新]
                                        欧米茄男表-超霸-自动机械手表 3520.50.00</a></p>
                                </div>
                                <div class="item-meta">
                                    <p class="price">当前价<span>¥1</span></p>
                                    <p class="bid-num"><i class="sui-icon"></i><span>0</span><em>次</em></p>
                                </div>
                            </li>

                            <li id="pai-detail-hot-item-606945801080" class="item">
                                <div class="item-info">
                                    <a target="_blank" class="img-wrap"
                                       href="javascript:;">
                                        <img alt="[一口价][9.5新] 浪琴男表-名匠-自动机械男表 L2.759.4.51.6"
                                             src="//img.alicdn.com/bao/uploaded/i1/O1CN019PgfYc1wdBfIbaRiL_!!0-paimai.jpg_210x210Q90.jpg">
                                    </a>
                                    <p class="title"><a target="_blank"
                                                        href="javascript:;">[一口价][9.5新]
                                        浪琴男表-名匠-自动机械男表 L2.759.4.51.6</a></p>
                                </div>
                                <div class="item-meta">
                                    <p class="price">当前价<span>¥11500</span></p>
                                    <p class="bid-num"><i class="sui-icon"></i><span>0</span><em>次</em></p>
                                </div>
                            </li>

                            <li id="pai-detail-hot-item-607395211572" class="item">
                                <div class="item-info">
                                    <a target="_blank" class="img-wrap"
                                       href="javascript:;">
                                        <img alt="[无保留价][9.5新] 浪琴男表-康卡斯-自动机械手表 L3.687.4.56.6"
                                             src="//img.alicdn.com/bao/uploaded/i1/O1CN01T71OnO1wdBdqiPl0F_!!0-paimai.jpg_210x210Q90.jpg">
                                    </a>
                                    <p class="title"><a target="_blank"
                                                        href="javascript:;">[无保留价][9.5新]
                                        浪琴男表-康卡斯-自动机械手表 L3.687.4.56.6</a></p>
                                </div>
                                <div class="item-meta">
                                    <p class="price">当前价<span>¥1</span></p>
                                    <p class="bid-num"><i class="sui-icon"></i><span>0</span><em>次</em></p>
                                </div>
                            </li>

                            <li id="pai-detail-hot-item-606945425504" class="item">
                                <div class="item-info">
                                    <a target="_blank" class="img-wrap"
                                       href="javascript:;">
                                        <img alt="[一口价][9.8新] 万国男表-达文西-自动机械-瑞士男士手表"
                                             src="//img.alicdn.com/bao/uploaded/i4/O1CN01NgJR241wdBe7qRpFC_!!0-paimai.jpg_210x210Q90.jpg">
                                    </a>
                                    <p class="title"><a target="_blank"
                                                        href="javascript:;">[一口价][9.8新]
                                        万国男表-达文西-自动机械-瑞士男士手表</a></p>
                                </div>
                                <div class="item-meta">
                                    <p class="price">当前价<span>¥78000</span></p>
                                    <p class="bid-num"><i class="sui-icon"></i><span>0</span><em>次</em></p>
                                </div>
                            </li>


                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <!--返回顶部-->
        <el-backtop :bottom="150" :right="200" title="返回顶部"></el-backtop>

        <!--尾部-->
        <Footer/>

        <!-- POST打开支付界面 -->
        <form :action="payObj.payUrl" method="post" id="toAlipayForm" target="_blank">
            <input name="price" type="hidden" :value="curGoodsObj.totalPrice"/>
            <input name="subject" type="hidden" :value="payObj.subject"/>
            <input name="body" type="hidden" :value="curGoodsObj.goodsName"/>
        </form>
    </div>
</template>

<script>
    import Header from "../../../components/Header";
    import Nav from "../../../components/Nav";
    import Footer from "../../../components/Footer";


    export default {
        name: "PaiDetail",
        components: {Header, Nav, Footer},
        data() {
            return {
                /*导航选项参数*/
                navOptions: {selectedNum: 1, autoShowCateNav: false},
                /*子图片导航下标*/
                subImgNavIndex: 0,
                /*商品详情导航下标*/
                detailNavIndex: 0,
                /*当前拍品对象信息*/
                curGoodsObj: {
                    /*拍品名称*/
                    goodsName: "[无保留价][9.5新] 积家男表-大师-自动机械男表 Q1718470",
                    /*保证金*/
                    deposit: 1500,
                    /*起拍价*/
                    startPrice: 1,
                    /*总价*/
                    totalPrice: 0,
                    /*当前价*/
                    curPrice: 1
                },
                /*支付界面地址*/
                payObj:{
                    // payUrl: "http://127.0.0.1/api/alipay/pay",
                    payUrl: "http://xsf.free.idcfengye.com/api/alipay/pay",
                    subject:"解忧杂货店拍品支付订单"
                }

            }
        },
        methods: {
            /**
             * 查看更多
             */
            getMoreRecord: function () {
                this.detailNavIndex = 1
                this.$router.push({path: '/pai-detail/record'})
            },
            /**
             * 支付
             */
            pay: function () {
                let toAlipayForm = document.getElementById('toAlipayForm');
                toAlipayForm.submit();
            }
        },
        mounted() {
            // 计算总价
            this.curGoodsObj.totalPrice = this.getCurGoodsTotalPrice
        },
        computed: {
            getCurGoodsTotalPrice: function () {
                return this.curGoodsObj.curPrice + this.curGoodsObj.deposit;
            }
        }
    }
</script>

<style scoped lang="less">
    .pai-detail {
        /*面包屑*/

        .breadcrumb {
            padding-left: 30px;
            width: 1200px;
            margin: 20px auto;
        }

        a {
            text-decoration: none;
        }

        .fn-clear {
            content: "";
            display: block;
            clear: both;
        }

        /*拍品内容*/

        .content {
            font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", \5b8b\4f53;
            margin: 0 auto;
            width: 1190px;
            position: relative;
            min-height: 1370px;

            /*左边*/

            .pm-main {
                color: #666;
                width: 940px;
                float: left;

                .pm-head {
                    border: 1px solid #ccc;
                }

                .pm-head:after {
                    content: "";
                    display: block;
                    clear: both;
                }

                /*结束前提醒*/

                .tbc-pm-notify-btn {
                    position: absolute;
                    display: inline-block;
                    padding: 2px 10px;
                    top: 30px;
                    right: 0;
                    border-left: 1px solid #E2E2E2;
                    text-align: center;

                    .tbc-pm-notify-iconfont {
                        display: inline-block;
                        width: 40px;
                        height: 40px;

                        em {
                            font-size: 40px;
                            color: rgb(128, 0, 25);
                        }
                    }

                }

                .tbc-pm-notify-btn:hover {
                    .notify-btn-text, em {
                        color: rgb(196, 27, 54) !important;
                    }
                }

                .pm-operation {
                    position: relative;
                    margin-top: 20px;
                    padding: 5px 20px 20px;
                    min-height: 167px;
                    margin-bottom: 13px;
                    background: url(//img.alicdn.com/tfs/TB1Gyt8Hf1TBuNjy0FjXXajyXXa-1036-385.png) no-repeat right bottom #eee;
                    background-size: 100%;

                    .pm-money {
                        .title {
                            margin-right: 10px;
                            margin-left: 50px;
                        }

                        .text {
                            font-size: 30px;
                            color: #8e011d;
                            font-weight: 700;
                            position: relative;
                            top: 5px;
                        }
                    }

                    .pm-bid {
                        margin-top: 11px;
                        margin-bottom: 15px;

                        .title {
                            margin-right: 10px;
                            margin-left: 50px;
                        }

                        .text {
                            vertical-align: middle;
                        }
                    }

                    .pm-deposit-price {
                        left: 5px;
                    }

                    .pm-current-price {
                        left: 5px;
                    }

                    .pm-submit {
                        .pm-button {
                            width: 240px;
                            height: 44px;
                            line-height: 44px;
                            text-align: center;
                            margin-left: 50px;
                            font-size: 16px;
                            font-weight: 700;
                            font-family: SimSun;
                            border-radius: 27px;
                        }
                    }
                }

                .fn-rmb {
                    font-family: arial;
                    font-style: normal;
                    padding-right: 4px;
                }

                .pm-num {
                    font-family: Tahoma;
                    position: relative;
                }

                .pm-status-no-sign {
                    .pm-operation {
                        .pm-money {
                            .text {
                                color: #000;
                            }
                        }
                    }

                    .pm-bid {
                        .deposit-text {
                            font-size: 32px;
                            color: #8e011d;
                            font-weight: 700;
                        }
                    }

                    .pm-apply-button {
                        display: inline-block;
                    }

                    .pm-button {
                        color: #fff;
                        background-color: #C41B36;
                        border: 1px solid #C41B36;
                    }
                }

                .pm-head-l {
                    margin-left: 20px;
                    width: 400px;

                    .pm-pic-con {
                        position: relative;
                        margin-top: 20px;

                        .ks-imagezoom-wrap {
                            position: relative;
                            display: block;

                        }

                    }

                    ul.pm-thumb {
                        display: inline-block;
                        margin-top: 20px;
                        margin-bottom: 25px;

                        li {
                            cursor: pointer;
                            float: left;
                            width: 46px;
                            height: 46px;
                            line-height: 47px;
                            border: 2px solid #fff;
                            margin-right: 10px;
                            overflow: hidden;
                            -webkit-transition-property: border-color;
                            -moz-transition-property: border-color;
                            -o-transition-property: border-color;
                            transition-property: border-color;
                            -webkit-transition-duration: .2s;
                            -moz-transition-duration: .2s;
                            -o-transition-duration: .2s;
                            transition-duration: .2s;
                        }

                        li.selected {
                            width: 46px;
                            height: 46px;
                            border: 2px solid #800019;
                        }
                    }

                    img {
                        display: inline;
                        vertical-align: middle;
                    }
                }

                .fn-left {
                    float: left;
                    display: inline;
                }

                .item-render-wrapper {
                    float: left;
                    width: 518px;
                }

                .pm-head-r {
                    position: relative;
                    width: 518px;
                }

                h1 {
                    margin-top: 25px;
                    margin-bottom: 7px;
                    margin-left: 20px;
                    width: 400px;
                    line-height: 24px;
                    font-size: 14px;
                    font-weight: 700;
                    color: #1b1b1b;
                }

                .pm-status {
                    position: relative;
                    margin-left: 20px;

                    .pm-status-mark {
                        display: none;
                        position: relative;
                        top: 8px;
                        float: left;
                        width: 89px;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        font-weight: 700;
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 100px;
                        border-top-left-radius: 0;
                        border-top-right-radius: 100px;
                        -webkit-box-shadow: 0 -4px 6px 0 rgba(48, 48, 77, .05), 0 -2px 4px 0 rgba(48, 48, 77, .05);
                        -moz-box-shadow: 0 -4px 6px 0 rgba(48, 48, 77, .05),0 -2px 4px 0 rgba(48, 48, 77, .05);
                        -ms-box-shadow: 0 -4px 6px 0 rgba(48, 48, 77, .05),0 -2px 4px 0 rgba(48, 48, 77, .05);
                        box-shadow: 0 -4px 6px 0 rgba(48, 48, 77, .05), 0 -2px 4px 0 rgba(48, 48, 77, .05);

                        span {
                            font-size: 14px;
                        }
                    }

                    .pm-time {
                        margin-left: 14px;

                        .pm-time-title {
                            font-size: 12px;
                            font-weight: 700;
                        }

                        span {
                            color: #333;
                        }

                        .time-num {
                            font-size: 24px;
                            margin: 0 2px;
                            position: relative;
                            top: 2px;
                        }
                    }
                }

                .pm-status-on {
                    .pm-status-mark-on {
                        display: inline;
                        color: #fff;
                        background-image: -webkit-linear-gradient(-90deg, #D72A4D 0, #AE1326 100%);
                        background-image: -moz-linear-gradient(-90deg, #D72A4D 0, #AE1326 100%);
                        background-image: -ms-linear-gradient(-90deg, #D72A4D 0, #AE1326 100%);
                        background-image: linear-gradient(-90deg, #D72A4D 0, #AE1326 100%);
                        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#AE1326, endColorstr=#D72A4D);
                        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#AE1326, endColorstr=#D72A4D)";

                        .pm-submit {
                            margin-right: -10px;

                        }
                    }

                    .pm-time {
                        .time-num {
                            color: #8e011d;
                        }

                    }
                }

                .pm-people {
                    margin: 10px 20px 0;
                    padding-bottom: 12px;
                    border-bottom: 1px solid #EEE;
                    text-align: right;
                    position: relative;

                    .pm-people-logo {
                        position: absolute;
                        left: 0;
                        top: 2px;
                        width: 92px;
                        height: 23px;
                    }

                    em {
                        position: relative;
                        bottom: -2px;
                        margin: 0 5px;
                        font-size: 18px;
                        color: #a47f1a;
                    }

                    .pm-line {
                        display: inline-block;
                        width: 1px;
                        height: 15px;
                        background-color: #ccc;
                        margin: 0 12px;
                        vertical-align: middle;
                    }

                }

                .pm-attachment {
                    margin: 10px 20px 0;
                    padding-bottom: 15px;
                    border-bottom: 1px solid #eee;

                    ul {
                        margin-top: 6px;

                        .line1 {
                            width: 145px;
                        }
                    }

                    ul:after {
                        content: "";
                        display: block;
                        clear: both;
                    }

                    li {
                        float: left;
                    }

                    .line1 {
                        width: 145px;
                    }

                    .line2 {
                        width: 160px;
                    }

                    .title {
                        margin-right: 10px;
                    }

                }

                .pm-attachment:after {
                    content: "";
                    display: block;
                    clear: both;
                }

                .pm-seller {
                    margin-top: 10px;

                    .ww-large {
                        a {
                            width: 67px;
                        }
                    }

                    .ww-light {
                        a {
                            background-image: url(//img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif);
                            background-image: -webkit-image-set(url(//img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x, url(//img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);
                            background-image: -moz-image-set(url(//img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x, url(//img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);
                            background-image: -o-image-set(url(//img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x, url(//img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);
                            background-image: -ms-image-set(url(//img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif) 1x, url(//img.alicdn.com/tps/i4/T1Rsz7FPJaXXbZhKn7-520-240.gif) 4x);
                            text-decoration: none !important;
                            width: 70px;
                            height: 20px;
                            zoom: 1;
                        }
                    }

                    a, a:hover {
                        text-decoration: none;
                        color: #666;
                    }

                    .extra-service {
                        margin-top: 5px;
                        padding-left: 55px;
                        position: relative;

                        .title {
                            position: absolute;
                            left: 0;
                            top: 3px;
                        }

                        .es-icon {
                            font-weight: 900;
                            font-size: 15px;
                        }

                        a {
                            margin-top: 4px;
                            display: inline-block;
                            white-space: nowrap;
                            text-decoration: none;
                            color: #A47F1A;
                            font-size: 12px;
                            padding-right: 10px;

                            s {
                                text-decoration: none;
                                margin-right: 3px;
                                font-size: 18px;
                                vertical-align: middle;
                            }
                        }

                    }

                    .title {
                        margin-right: 10px;
                    }
                }

                .pm-body {
                    border-left: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                    border-right: 1px solid #ccc;

                    #tab4 a {
                        background-image: url(//img.alicdn.com/tps/i4/TB1Bin3HXXXXXbRXXXXdyKUFVXX-27-20.gif);
                        background-repeat: no-repeat;
                        background-position: right 2px;
                    }

                    .pm-detail-tab {
                        padding: 0 20px 20px;
                    }

                    .pm-bid-flow {
                        position: relative;
                        overflow: hidden;
                        border-bottom: 1px solid #ccc;
                        bottom: -1px;
                        z-index: 12;
                    }

                    .pm-addition {
                        position: relative;

                        ul.tab-menu {
                            height: 63px;
                            position: relative;
                            z-index: 161;
                            width: 938px;
                            background-color: #f6f6f6;
                            border-bottom: 1px solid #e6e6e6;
                            border-top: 1px solid #e6e6e6;

                            li {
                                float: left;
                                display: inline;
                                position: relative;
                                top: 1px;
                                padding-top: 2px;
                                box-sizing: border-box;
                                overflow: hidden;

                                a {
                                    text-decoration: none;
                                    color: #666;
                                    float: left;
                                    font-weight: 700;
                                    font-size: 14px;
                                    padding: 20px 35px;
                                    border-right: 1px solid #e6e6e6;
                                }
                            }

                            li.current {
                                background-color: #7f0019;

                                a {
                                    background-color: #fff !important;
                                    color: #7f0019;
                                }
                            }
                        }

                    }

                }
            }

            /*右边*/

            .pm-sub {
                position: absolute;
                right: 0;
                top: 0;
                width: 249px;
                border: 1px solid #ccc;
                border-left-width: 0;
                background: #f0f0f0;

                em {
                    font-style: normal;
                }

                .mini-record-list {
                    text-align: center;
                    padding: 30px 20px 20px;

                    .record-list-title {
                        position: relative;
                        margin-bottom: 15px;

                        .line {
                            width: 100%;
                            height: 1px;
                        }

                        .title {
                            position: absolute;
                            font-weight: 700;
                            color: #333;
                            top: -11px;
                            left: 35px;
                            margin-left: -44px;
                            padding: 0 10px;

                            em {
                                font-weight: 700;
                                color: #333;
                            }
                        }

                    }

                    ul.record-list-cnt {
                        .record-list-head {
                            color: #333;
                        }

                        li {
                            margin-top: 10px;
                            position: relative;
                            line-height: 20px;
                        }

                        span {
                            display: inline-block;
                        }

                        .record-icon {
                            width: 50px;
                            text-align: left;
                        }

                        .nickname {
                            width: 65px;
                        }

                        .price {
                            margin-right: -10px;
                            width: 95px;
                        }

                        .leader {
                            span {
                                color: #7f0019;
                                font-weight: 700;
                            }

                            s {
                                background-position: 0 -22px;
                            }
                        }

                        .out {
                            s {
                                background-position: 0 -43px;
                            }
                        }

                        s {
                            background: url(//img.alicdn.com/tps/i2/TB1sIuvGXXXXXaKXVXXcUqb4XXX-72-279.png) 999px 999px no-repeat transparent;
                            float: left;
                            vertical-align: middle;
                            text-indent: -999em;
                            width: 28px;
                            height: 16px;
                        }
                    }

                    .see-more {
                        display: block;
                        color: #848484;
                        margin-top: 12px;
                        text-align: center;
                        position: relative;
                        z-index: 99;
                    }

                    .see-more:hover {
                        color: rgb(142, 1, 29);
                    }
                }

                .list-content {
                    width: 210px;
                    margin: 0 auto;

                    .item-list {
                        width: 210px;
                        margin: 0 auto;

                        .item {
                            display: block;
                            margin-bottom: 20px;

                            .item-info {
                                position: relative;

                                .img-wrap {
                                    display: block;
                                    width: 210px;
                                    height: 210px;
                                    overflow: hidden;
                                    text-align: center;
                                    line-height: 205px;
                                    background-color: #fff;

                                    img {
                                        display: inline;
                                        vertical-align: middle;
                                    }
                                }

                                .title {
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    background-color: #fff;
                                    background-color: rgba(255, 255, 255, .7);
                                    filter: alpha(opacity=70);
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                    padding-left: 10px;
                                    width: 200px;
                                    height: 30px;
                                    line-height: 30px;
                                    text-align: left;

                                    a {
                                        color: #1b1b1b;
                                        font-size: 12px;
                                    }
                                }
                            }

                            .item-meta {
                                background-color: #fff;
                                position: relative;
                                height: 36px;
                                line-height: 36px;
                                text-align: left;

                                .price {
                                    color: #848484;
                                    font-size: 12px;
                                    padding-left: 10px;

                                    span {
                                        font-family: "Microsoft YaHei", simhei, sans-serif;
                                        color: #800019;
                                        font-size: 16px;
                                        font-weight: 700;
                                        padding-left: 5px;
                                        position: relative;
                                        top: 1px;
                                    }
                                }

                                .bid-num {
                                    color: #848484;
                                    display: block;
                                    position: absolute;
                                    top: 50%;
                                    right: 10px;
                                    margin-top: -16px;
                                    height: 36px;
                                    line-height: 36px;

                                    i {
                                        color: #800019;
                                        padding-right: 2px;
                                        position: relative;
                                        top: -2px;
                                    }

                                    i.sui-icon {
                                        display: inline-block;
                                        width: 20px;
                                        height: 16px;
                                        background-image: url("../../../assets/sui_icon.png");
                                    }

                                    span {
                                        color: #800019;
                                        font-family: Tahoma;
                                        font-size: 20px;
                                        font-weight: 700;
                                        padding-right: 4px;
                                    }

                                    em {
                                        position: relative;
                                        top: -2px;
                                    }
                                }
                            }
                        }
                    }
                }

                .recommend-over {
                    position: relative;

                    .list-header {
                        padding-top: 20px;
                        border-top: 1px solid #ccc;

                        h3 {
                            font-size: 30px;
                            padding-left: 14px;
                            color: #373737;

                            i {
                                color: #800019;
                                font-style: normal;
                            }
                        }

                        .list-reflesh {
                            position: absolute;
                            top: 35px;
                            right: 18px;
                            color: #999;
                            font-size: 12px;
                            cursor: pointer;
                        }

                        .list-reflesh:hover {
                            text-decoration: underline;
                            color: rgb(196, 27, 54);
                        }
                    }
                }
            }
        }

        address, caption, cite, code, dfn, em, th, var {
            font-style: normal;
            font-weight: 500;
        }


        /*清除浮动以获取宽高*/

        .content:after {
            content: "";
            display: block;
            clear: both;
        }

    }
</style>